<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用定位实现的进度条</title>

    <style type="text/css">
        .wrapper {
            position: relative;
            height: 50px;
            border: 1px solid blue;
            border-radius: 8px;
            overflow: hidden;
        }

        .wrapper>* {
            height: 50px;
        }

        .wrapper>.progress-text {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 100;
            width: 100%;
            line-height: 50px;
            text-align: center;
            /* 让元素中显示的 "百分比文本" 居中对齐 */
        }

        .wrapper>.progress-bar {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 10;
            width: 0%;
            /* 用该元素的宽度实现进度条效果 */
            background: rgb(99, 99, 255);
        }

        .wrapper>.progress-bg {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            width: 100%;
            background: rgb(200, 200, 200);
        }
    </style>

</head>

<body>

    <h3>使用定位实现的进度条</h3>

    <div class="wrapper">
        <div class="progress-text">0%</div>
        <div class="progress-bar"></div>
        <div class="progress-bg"></div>
    </div>
    <button type="submit">上传</button>
    <script type="text/javascript">
        (function () {
            let w = document.querySelector('.progress-bar');
            let t = document.querySelector('.progress-text');
            let sub = document.querySelector('[type=submit]');
            let ww = w.clientWidth;
            let progress = function () {
                let id=setInterval(function () {
                    if (ww < 100) {
                        ww++;
                        w.style.width = ww + '%';
                        t.innerHTML = ww * 1 + '%';
                    }
                   else{
                       clearInterval(id); alert("上传成功！");
                   }
                },50);
            }
            sub.addEventListener('click', progress, false);
        })()
    </script>
</body>

</html>